留住访客！超有趣网站进度条设计

人们讨厌等待，特别是加载网站的时候，可有些时候由于网速或者浏览器的原因，等待总是不可避免，如果在网站中也能像移动应用一样，有创意的进度条，会很大地减少人们的焦虑，还能避免因等待过久放弃进入这种不幸的事故。

相对于移动端，在网站中使用进度条不常见，该用哪种方式呈现给访客也是一个考验设计师的难题。现在你可以来看看这10个在网站中创意运用进度条的设计，它们既带给访客乐趣，也不妨碍内容阅读，学习一下，让它们在无形的展示中留住网速拙急的访客！（大多数提供源码，你可以很方便地学习它们）

进度条运用得当可不简单，细节是魔鬼，当你不知道如何处理这个魔鬼时，建议阅读《谈谈加载(LOADING)的那点事》，你也可以从其他优秀作品中吸取灵感：《18个读取进度条的优秀设计案例》

Spinning Loading

用大写的「Loading 」，中间的O以新奇的动态旋转，是个非常清新的设计，提供了源码，可以很方便应用到你的网站。

Sinister Loadscreen

是的，看起来很邪恶的形象，不过很适合应用在暗黑系的黑色风格网站上，或者你可以用它来营造神秘感。

CProgress

Cprogress使用jQuery来展现一个非常酷的和易于使用的loadscreen。强大的是，你也能鼓捣成这几行代码，因为它们是完全可定制的！

Spin.js

一个让世界快速旋转的「Loading 」！你也可以通过控制右边的滑块来改变它的形状，给它加点阴影，甚至改变旋转的方向！

Alessio Atzeni

这教程又酷又好学，因为它是完全用HTML和CSS来实现的，还有三种进度模板供你选择。

Facebook-ish Loading Animation

如果你想让网站看起来像Facebook，那么这个进度条最适合你了，它的加载方式与Facebook加载图像时一样。

Flickr Style

如果你是Flickr的爱好者，那么这个不能错过，完全仿照Flickr的效果来。

原文地址：1stwebdesigner
本文由优设网原创翻译，转摘请注明优设网译文出处，谢谢各位小编。

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。
设计微博：拥有粉丝量58万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加优秀网页设计微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：